<template>
    <div class="banner">
        <div class="block">
            <el-carousel height="500px">
                <el-carousel-item v-for="item in banner_list">
                    <router-link :to="item.link">
                        <img :src="item.image_url" alt="">
                    </router-link>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Banner",
        data() {
            return {
                banner_list:[],
            }
        },
        methods:{
            get_banners() {
                // 获取banner图
                this.$axios.get(`${this.$settings.base_url}/home/banners`, {
                }).then(response => {
                    this.banner_list = response.data;
                    // console.log(this.banner_list)
                }).catch(() => {
                    this.$message({
                        message: "获取轮播图信息有误，请联系客服工作人员",
                    })
                })
            },
        },
        created() {
            this.get_banners()
        }
    }
</script>

<style scoped>
    .banner {
        z-index: 1;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    img{
        width: 100%;
        height: 100%;
    }
</style>